<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <div class="logo">
          <img src="../assets/images/home_active.png" class="auto-img" alt="" />
        </div>
        <div class="logo-text">Luckin Coffee</div>
      </template>
      <template #right>
        <div class="guang" @click="goPage('Menu')">先逛一逛</div>
      </template>
    </van-nav-bar>

    <div class="user-box">
      <div>
        <div class="welcome-zhtitle">找回密码!</div>
        <div class="welcome-entitle">Find password</div>
      </div>
      <div class="form-box">
        <van-form @submit="next">
          <van-field
            v-model="userInfo.email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            autocomplete="off"
            :rules="[
              { required: true, message: '请填写邮箱' },
              { pattern: emailReg, message: '邮箱格式不正确' },
            ]"
          />
          <van-field
            v-model="userInfo.code"
            name="code"
            label="验证码"
            placeholder="验证码(6个字符)"
            autocomplete="off"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern: codeReg,
                message: '验证码格式不正确',
              },
            ]"
          >
            <template #button>
              <van-button size="small" type="primary" color="#0c43ba" @click='getEmail'
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div class="forget-box">
            <div class="forget-text" @click="goPage('Login')">
              已有账号，立即登录
            </div>
          </div>
          <div class="login-btn">
            <van-button round block color="#0c34ba" native-type="submit" 
              >下一步</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      userInfo: {
        email: "",
        code: "",
      },
      //   验证邮箱
      emailReg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
      //   验证验证码（6个字符）
      codeReg: /^\d{6}$/,
    };
  },

  methods: {
    //   下一步
    next(values) {
      
        this.axios({
        method: "post",
        url: "/checkValidCode",
        data: {
          validCode: this.userInfo.code,
        },
      })
        .then((res) => {
          
          if(res.data.code=='K001'){
              setTimeout(() => {
                  this.$router.push({name:"GetNewCode"});
              }, 500);
          }
        })
        .catch((err) => {
          
        });
    },
    // 获取邮箱验证码接口
    getEmail() {
      this.axios({
        method: "post",
        url: "/emailValidCode",
        data: {
          email: this.userInfo.email,
        },
      })
        .then((res) => {
          
          if(res.data.code=='J001'){
              this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          
        });
    },
    goPage(name) {
      this.$router.push({ name });
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .logo-box {
    display: flex;
    align-items: center;
  }
  .logo-text {
    margin-left: 10p;
    font-size: 16px;
    font-weight: bold;
    color: #666;
  }
  .guang {
    color: #0c34ba;
    font-weight: bold;
  }
  .user-box {
    margin-top: 80px;
    padding: 15px;
    .welcome-zhtitle {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #646566;
    }
    .welcome-entitle {
      font-size: 16px;
      color: #999;
    }
    .form-box {
      margin-top: 50px;
      .forget-box {
        margin-top: 10px;
        display: flex;
        .forget-text {
          margin-left: auto;
          font-size: 14px;
          color: #666;
        }
      }
      .login-btn {
        margin-top: 50px;
      }
    }
  }
}
</style>